<template>
    <div id="total">
        <van-nav-bar title="分类" />
        <van-search
            shape="round"
            background="#fff"
            placeholder="请输入搜索关键词"
            @click="goSearchDetail"
        />
        <van-row>
            <van-col span="6" offset="1" class="left">
                <van-sidebar v-model="active" @change="onChange">
                    <van-sidebar-item
                        :title="item.name"
                        v-for="item in classifyList"
                        :key="item.id"
                    /> </van-sidebar
            ></van-col>
            <GoodList :list="goodsList" :span="17" class="right"></GoodList>
        </van-row>
    </div>
</template>

<script setup lang="ts">
import { Search } from 'vant'
import { Sidebar, SidebarItem } from 'vant'
import { Card } from 'vant'
import { Col, Row } from 'vant'
import { ref, type Ref, onMounted } from 'vue'
import { RequestClassify, RequestGoodsByClassifyid } from '@/api/classify'
import type { IClassify, IGoods } from '@/types/types'
import { NavBar } from 'vant'
import { useGoodsDetail } from '@/hooks/detail'
import GoodList from '@/components/GoodList.vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

const active = ref(0)
const { bindGoodsDetail } = useGoodsDetail()
const classifyList: any = ref([]) //分类名列表
const goodsList: Ref<Array<IGoods>> = ref([]) //分类商品列表
let classifyId: number
const router = useRouter()

const GetClassify = async () => {
    const data = await RequestClassify()
    const { resultCode, resultInfo } = data
    if (resultCode === 1) {
        //获取分类名，并赋给分类列表
        console.log(`resultInfo>>>`, resultInfo)
        resultInfo.list = [
            { id: 1, name: '早餐' },
            { id: 3, name: '午餐' },
            { id: 4, name: '晚餐' },
        ]
        classifyList.value = resultInfo.list.map((item: IClassify) => {
            return { id: item.id, name: item.name }
        })
        console.log(`classifyList.value>>>`, classifyList.value)
        // classifyList.value = {
        //     {id:1,name:"早餐"},
        //     {id:2,name:"午餐"},
        //     {id:3,name:"晚餐"}
        // }
        classifyId = classifyList.value[0].id
        GetGoodsByClassifyId(classifyId)
    }
}
const GetGoodsByClassifyId = async (categoryId: number) => {
    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/goods/category',
        //post请求参数使用data选项, get参数 params选项
        params: {
            categoryId,
        },
    })
    const { code, info } = res.data
    if (code === 1) {
        //获取分类商品，并赋给分类商品列表
        goodsList.value = info.list
    }

    // const data = await RequestGoodsByClassifyid(categoryId);
    // const { resultCode, resultInfo } = data;
    // if (resultCode === 1) {//获取分类商品，并赋给分类商品列表
    //     goodsList.value = resultInfo.list
    // }
}
onMounted(() => {
    GetClassify()
})
const onChange = (index: number) => {
    classifyId = classifyList.value[index].id
    GetGoodsByClassifyId(classifyId - 1)
}
const goSearchDetail = () => {
    router.push({ path: '/search' }) //跳转搜索页面
}
</script>

<style lang="scss" scoped>
#total {
    .van-nav-bar {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
    }
    .van-search {
        margin-top: 30px;
    }
    .van-row {
        .left {
            .van-sidebar-item {
                width: 100%;
            }
        }

        .right {
            .van-card {
                .van-button {
                    background-color: rgb(236, 13, 13);
                    color: #fff;
                    border-radius: 16px;
                }
            }
        }
    }
}
</style>
